<template>
  <div class="mod-accessrecordsgoods" >
    <el-form :inline="true" :model="searchForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-date-picker
          v-model="searchForm.addTime"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="-"
          :picker-options="pickerOptions"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="contentCss">
      <div class="statisticsCss" id="pageChart"></div>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        searchForm:{addTime:null},
        pageChart:null,
        pickerMinDate: null,
        pickerMaxDate: null,
        day31: 31 * 24 * 3600 * 1000,
        pickerOptions:{
          onPick: ({ maxDate, minDate }) => {
              if (minDate && this.pickerMinDate) {
                this.pickerMinDate = null;
              } else if (minDate) {
                this.pickerMinDate = minDate.getTime();
              }
            },
            disabledDate: (time) => {
              if (this.pickerMinDate) {
                return (time.getTime() > (this.pickerMinDate + this.day31)) || (time.getTime() < (this.pickerMinDate - this.day31));
              }
              return false;
            }
        }
      }
    },
    mounted(){
      
      this.getDataList()
    },

    methods: {

      getDataList(){
        let dataForm = {}
        if(this.searchForm.addTime){
          dataForm.addTimeStart = this.searchForm.addTime[0]
          dataForm.addTimeEnd = this.searchForm.addTime[1]
        }
        this.$http({
          url: '/mall/accessStatistics/pageStatistics',
          method: 'get',
          params: dataForm
        }).then((res) => {
          this.initPageChart(res.data.data)
        })
        
      },
      initPageChart(data){
        let option = {
          title: {
            text: '页面访问量统计'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            name: '次数',
            // y轴名称的位置
            type: 'value',
            
          },
          yAxis: {
            
            type: 'category',
            data: data.pageTitleData
          },
          series: [
            {
              data: data.pageSeriesData,
              type: 'bar',
              itemStyle: {
                color: '#3a8ee6',
              }
            }
          ]
        }
        this.pageChart = this.$echarts.init(document.getElementById('pageChart'))
        this.$nextTick(() => {
          this.pageChart.setOption(option)
        })
        
      },
    }
  }
</script>
<style scoped>
  .statisticsCss{
    width: 100%;
    height: 600px
  }
</style>